
<template>
  <div v-font-size-color="{ color, fontSize }">自定义指令</div>
  <button @click="changeFontSizeAndColor">改变字体大小和颜色</button>

  <!-- 顺便学习下常见的自定义指令 -->
  <button v-debounce="debounceClick">防抖测试</button>

</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
const color = ref('red')
const fontSize = ref('20px')
const changeFontSizeAndColor = () => {
    color.value = 'green'
    fontSize.value = '40px'
}

const debounceClick = () => {
    console.log('防抖测试==')
}
</script>
<style scoped lang='scss'>
</style>